<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>响应式导航条</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/flipster.css">
</head>

<body>
<!--header start-->
<header class="nav navbar-default navbar-mystyle navbar-fixed-top">
  <div class="navbar-header">
  <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button>
    <i class="fa fa-bars slide li-border"></i>
    <a class="logo"> 
      管理系统
    </a>
  </div>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav pull-right">
      <li class="li-border">
        <a href="#" class="mystyle-color">
          <span class="fa fa-bell-o"></span>
          <span class="topbar-num">0</span>
        </a>
      </li>
      <li class="li-border dropdown">
        <a href="#" class="mystyle-color" data-toggle="dropdown">
          <span class="fa fa-search"></span> 搜索
        </a>
        <div class="dropdown-menu search-dropdown">
          <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-btn">
              <button type="button" class="btn btn-default">搜索</button>
            </span>
          </div>
         </div>
      </li>
      <li class="dropdown li-border">
        <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">帮助与文档<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">帮助与文档</a></li>
          <li class="divider"></li>
          <li><a href="#">论坛</a></li>
          <li class="divider"></li>
          <li><a href="#">博客</a></li>
        </ul>
      </li>
      <li class="dropdown li-border">
        <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">
            <span class="glyphicon glyphicon-user"></span> User<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">个人信息</a></li>
          <li class="divider"></li>
          <li><a href="#">修改密码</a></li>
          <li class="divider"></li>
          <li><a href="#">切换账号</a></li>
          <li class="divider"></li>
          <li><a href="#">退出系统</a></li>
        </ul>
      </li>
    </ul>
  </div>
</header>
<!-- header end -->
<!-- aside start -->
<aside>
    <div class="aside">
      <div class="aside-menu" id="sidebar">
        <div class="submenu">
          <a href="#">
            <i class="fa fa-dashboard">
              <b class="bg-danger"></b>
            </i>
            <span>组件<i class="fa fa-angle-down"></i></span>
          </a>
        </div>
        <div class="menu_body" style="display: block;">
          <a href="buttons.html"><i class="fa fa-angle-right"></i><span>按钮</span></a>
          <a href="slider.html"><i class="fa fa-angle-right"></i><span>轮播</span></a>
        </div>
        <div class="submenu">
          <a href="#">
            <i class="fa fa-user">
              <b class="bg-warning"></b>
            </i>
            <span>个人信息<i class="fa fa-angle-down"></i></span>
          </a>
        </div>
        <div class="menu_body">
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
        </div>
        <div class="submenu">
          <a>
            <i class="fa fa-laptop">
              <b class="bg-primarydark"></b>
            </i>
            <span>我的设备<i class="fa fa-angle-down"></i></span>
          </a>
        </div>
        <div class="menu_body">
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
        </div>
        <div class="submenu">
          <a>
            <i class="fa fa-plus">
              <b class="bg-primary"></b>
            </i>
            <span>添加设备<i class="fa fa-angle-down"></i></span>
          </a>
        </div>
        <div class="menu_body">
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
        </div>
        <div class="submenu">
          <a href="#">
            <i class="fa fa-gears">
              <b class="bg-success"></b>
            </i>
            <span>操作日志<i class="fa fa-angle-down"></i></span>
          </a>
        </div>
        <div class="menu_body">
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
        </div>
        <div class="submenu">
          <a href="#">
            <i class="fa fa-shield">
              <b class="bg-info"></b>
            </i>
            <span>安全设置<i class="fa fa-angle-down"></i></span>
          </a>
        </div>
        <div class="menu_body">
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
          <a href="#"><i class="fa fa-angle-right"></i><span>应用经济学</span></a>
        </div>
      </div>
    </div>
</aside>
<!-- aside end -->
<!-- content start -->
<div class="content">
  <div class="vbox">
    <ul class="breadcrumb b-b b-light pull-in">
      <li>
        <a href="index.html"><i class="fa fa-home"></i>组件</a>
      </li>
      <li class="active">轮播</li>
    </ul>
    <div class="scrollable padder">
      <h4>简单轮播</h4>
      <div class="banner Unslider1">
        <ul>
          <li><img src="img/01.jpg" alt="" width="640" height="280" ></li>
          <li><img src="img/02.jpg" alt="" width="640" height="280" ></li>
          <li><img src="img/03.jpg" alt="" width="640" height="280" ></li>
          <li><img src="img/04.jpg" alt="" width="640" height="280" ></li>
          <li><img src="img/05.jpg" alt="" width="640" height="280" ></li>
        </ul>
      </div>
      <h4>带有箭头的轮播</h4>
      <div class="banner Unslider2">
        <ul>
          <li><img src="img/01.jpg" alt="" width="640" height="280" ></li>
          <li><img src="img/02.jpg" alt="" width="640" height="280" ></li>
          <li><img src="img/03.jpg" alt="" width="640" height="280" ></li>
          <li><img src="img/04.jpg" alt="" width="640" height="280" ></li>
          <li><img src="img/05.jpg" alt="" width="640" height="280" ></li>
        </ul>
        <a href="javascript:void(0);" class="unslider-arrow2 prev">
          <img class="arrow" id="al" src="img/arrowl.png" alt="prev" width="20" height="35">
        </a>
        <a href="javascript:void(0);" class="unslider-arrow2 next">
          <img class="arrow" id="ar" src="img/arrowr.png" alt="next" width="20" height="37">
        </a>
      </div>
      <h4>3D轮播类型一</h4>
      <div  class="teachers_banner">
        <div class="container clearfix teachers_b">
          <div class="slide" id="slide">
            <ul>
              <li><img src="img/01.jpg" alt="" ></li>
              <li><img src="img/02.jpg" alt="" ></li>
              <li><img src="img/03.jpg" alt="" ></li>
              <li><img src="img/04.jpg" alt="" ></li>
              <li><img src="img/05.jpg" alt="" ></li>
              <li><img src="img/01.jpg" alt="" ></li>
            </ul>
            <div class="arrow">
                <div class="prev"><</div>
                <div class="next">></div>
            </div>
          </div>
        </div>
      </div>
      <h4>3D轮播类型二</h4>
      <div class="zzsc-container">
        <div class="zzsc-content">
          <div id="Main-Content">
            <div class="Container">
              <div class="flipster1">
                <ul>
                  <li><img src="img/01.jpg" alt="" width="540" height="280" ></li>
                  <li><img src="img/02.jpg" alt="" width="540" height="280" ></li>
                  <li><img src="img/03.jpg" alt="" width="540" height="280" ></li>
                  <li><img src="img/04.jpg" alt="" width="540" height="280" ></li>
                  <li><img src="img/05.jpg" alt="" width="540" height="280" ></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <h4>3D轮播类型三</h4>
      <div class="zzsc-container">
        <div class="zzsc-content">
          <div id="Main-Content">
            <div class="Container">
              <div class="flipster2">
                <ul>
                  <li><img src="img/01.jpg" alt="" width="540" height="280" ></li>
                  <li><img src="img/02.jpg" alt="" width="540" height="280" ></li>
                  <li><img src="img/03.jpg" alt="" width="540" height="280" ></li>
                  <li><img src="img/04.jpg" alt="" width="540" height="280" ></li>
                  <li><img src="img/05.jpg" alt="" width="540" height="280" ></li>
                </ul>
              </div>
            </div>
          </div>
          </div>
      </div>
    </div>
  </div>
  
</div>
<!-- content end -->

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/unslider.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery.flipster.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>

</body>
</html>